import React from "react";
import {
  List,
  InputItem,
  Checkbox,
  Button,
  ImagePicker,
  Toast,
} from "antd-mobile";
import { http } from "@/utils/request";
import api from "@/utils/api";
import { getImageUrl } from "@/utils/utils.js";
import storage from "@/utils/storage.js";
import "./index.less";
import { withRouter } from "react-router-dom";
const CheckboxItem = Checkbox.CheckboxItem;

const Item = List.Item;

const userStatus = {
  // 签约状态 初始化-01 10---待审核 签约未完成--99 签约成功-00
  "01": "初始化",
  "10": "待审核",
  "99": "签约未完成",
  "00": "签约成功",
};
class Verify extends React.Component {
  constructor(props) {
    super(props);

    let imgUrl = "";
    this.state = {
      // url: image
      checkState:  true,
      image1: require("../../../images/mine/idcard1.png"),
      image2: require("../../../images/mine/idcard2.png"),
      name: "",
      idCard: "",
      idPicPre: "",
      idPicBak: "",
      signStatus: "01", //签约状态判断
    };
  }
  componentDidMount() {
    let userInfo = storage.get("userInfo")||{};
    let { signStatus, idCard, name, idPicPre, idPicBak } = userInfo;
    this.setState({
      signStatus,
      idCard,
      name,
      idPicPre,
      idPicBak,
    });
  }
  // 根据状态判断 html 信息
  getPageHtml = () => {
    let html = ``;
    switch (this.state.signStatus) {
      case "00":
        html = (
          <div className="verify">
            <div style={{ backgroundColor: "#fff", padding: "0.4rem 0.4rem 0" }}>
              <div className="flex">
                <p style={{ width: "7em" }}>姓名：</p>
                <p>{this.state.name}</p>
              </div>
              <div className="flex">
                <p style={{ width: "7em" }}>身份证号码：</p>
                <p>{this.state.idCard}</p>
              </div>
            </div>
            <div style={{ backgroundColor: "#fff", padding: "0.2rem 0.4rem " }}>
              <p style={{ marginBottom: ".4rem" }}>证件照片</p>
              <div className="flex flex-between">
                <div style={{ width: "45%", position: "relative" }}>
                  <img className="idcardImage" src={getImageUrl(this.state.idPicPre)} />
                </div>
                <div style={{ width: "45%", position: "relative" }}>
                  <img className="idcardImage" src={getImageUrl(this.state.idPicBak)} />
                </div>
              </div>
            </div>
            <div style={{ padding: "0.4rem" }}>
              <Button
                type="primary"
                onClick={() => {
                  this.props.history.replace("mine");
                }}
              >
                返回我的
              </Button>
            </div>
          </div>
        );
        break;
      case "10":
        html = (
          <div>
            <div
              className="text-center"
              style={{ backgroundColor: "#fff", padding: "1.3rem" }}
            >
              <img
                style={{ width: "2rem" }}
                src={require("../../../images/mine/userVerifyWait.png")}
              />
              <p style={{ padding: ".2rem" }} className="ft-16 ft-bold">
                您的信息已提交成功
              </p>
              <p>请及时关注审核状态，我们将在3个工作日内</p>
              <p>对您的信息进行审核</p>
            </div>
            <div style={{ padding: "0.4rem" }}>
              <Button
                type="primary"
                onClick={() => {
                  this.props.history.replace("mine");
                }}
              >
                完成
              </Button>
            </div>
          </div>
        );
        break;

      case "99":
        html = (
          <div>
            <div
              className="text-center"
              style={{ backgroundColor: "#fff", padding: "1.3rem" }}
            >
              <img
                style={{ width: "2rem" }}
                src={require("../../../images/mine/userVerifyFail.png")}
              />
              <p style={{ padding: ".2rem" }} className="ft-16 ft-bold">
                对不起,实名认证失败
              </p>
              <p>实名认证信息有误, 请核对后重新提交</p>
            </div>
            <div style={{ padding: "0.4rem" }}>
              <Button
                type="primary"
                onClick={() => {
                  this.setState({
                    signStatus: "01",
                  });
                }}
              >
                重新提交
              </Button>
            </div>
          </div>
        );
        break;

      default:
        html = (
          <div className="verify">
            <List>
              <InputItem
                placeholder="请输入您的姓名"
                value={this.state.name}
                onChange={(value) => {
                  this.setState({
                    name: value,
                  });
                }}
              >
                姓名
              </InputItem>
              <InputItem
                placeholder="请输入18位有效身份身份证号码"
                value={this.state.idCard}
                onChange={(value) => {
                  this.setState({
                    idCard: value,
                  });
                }}
              >
                身份证号码
              </InputItem>
            </List>
            <div style={{ backgroundColor: "#fff", padding: "0.4rem" }}>
              <p style={{ marginBottom: ".4rem" }}>证件照片</p>
              <div className="flex flex-between">
                <div style={{ width: "45%", position: "relative" }}>
                  <ImagePicker onChange={this.onImageChange2} />
                  <img className="idcardImage" src={this.state.image2} />
                </div>
                <div style={{ width: "45%", position: "relative" }}>
                  <ImagePicker onChange={this.onImageChange1} />
                  <img className="idcardImage" src={this.state.image1} />
                </div>
              </div>
              <p className="col-8C8C8C ft-12">
                格式为jpg/png/gif，大小不得超过3M
              </p>
            </div>
            <CheckboxItem checked={this.state.checkState} onChange={(e) => this.onChange(e)}>
              <p className="col-8C8C8C">
                本人阅读并同意签署
                <span className="col-green">《用户合作协议》</span>
              </p>
            </CheckboxItem>
            <div style={{ padding: "0.4rem" }}>
              <Button type="primary" onClick={this.submit}>
                提交
              </Button>
            </div>
          </div>
        );
        break;
    }
    return html;
  };
  // 修改用户协议
  onChange = (val) => {
    this.setState({
      checkState: val.target.checked,
    });
  };
  // 修改图片 1
  onImageChange1 = (files, type) => {
    this.setState({
      files,
    });
    let formData = new FormData();
    // upFile就是后台接收的key
    formData.append("files", files[0].file, files[0].file.name);
    http
      .upload(api.uploadFile, formData)
      .then((res) => {
        let image = getImageUrl(res.data);
        this.setState({
          image1: image,
          idPicPre: res.data,
        });
      })
      .catch((err) => {
      });
  };
  // 修改图片 2
  onImageChange2 = (files, type) => {
    this.setState({
      files,
    });
    let formData = new FormData();
    // upFile就是后台接收的key
    formData.append("files", files[0].file, files[0].file.name);
    http
      .upload(api.uploadFile, formData)
      .then((res) => {
        let image = getImageUrl(res.data);
        this.setState({
          image2: image,
          idPicBak: res.data,
        });
      })
      .catch((err) => {
      });
  };

  submit = () => {
    let {
      image1,
      image2,
      checkState,
      name,
      idCard,
      idPicPre,
      idPicBak,
    } = this.state;
    if (!checkState) {
      Toast.info("请先勾选用户协议");
      return;
    }
    if (image1.indexOf("http") < 0 || image2.indexOf("http") < 0) {
      Toast.info("请先上传图片");
      return;
    }
    var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
    if (!reg.test(idCard)) {
      Toast.info("请输入正确的身份证号码");
      return;
    }
    if (!name) {
      Toast.info("姓名不能为空");
      return;
    }
    let param = {
      idPicBak,
      idPicPre,
      // idPicPre: image1,
      // idPicBak: image2,
      name,
      idCard,
    };

    http
      .postJson(api.idCardUpload, param)
      .then((res) => {
        this.setState({
          signStatus : '10'
        })
      })
      .catch((err) => {
      });
  };
  render() {
    return <div>{this.getPageHtml()}</div>;
  }
}
export default withRouter(Verify);
